<template>
	<view class="business-center">
		<!-- 用户信息 -->
		<view class="user">
			<image class="user-avatar" :src="statsData.headimg" mode="aspectFit"></image>
			<view class="">
				<view class="flex-left">
					<view class="user-name">{{statsData.title}}</view>
					<view class="user-grade">{{statsData.type_name}}</view>
				</view>
				<view class="user-commision">开店分佣比{{statsData.shop_rate}}% / 订单分佣比{{statsData.order_rate}}% </view>
			</view>
		</view>
		<!-- 数据统计 -->
		<view class="stats">
			<view class="total">
				<view class="stats-title">{{stats.total.title}}</view>
				<view class="total-value">{{statsData[stats.total.index]}}</view>
			</view>
			<view class="debt">
				<view class="stats-item" v-for="(item,index) in stats.debt" :key="index">
					<view class="stats-title">{{item.title}}
						<view class="icon-help" v-if="item.help" @click="switchHelp(index)"></view>
						<view class="icon-link" v-if="item.link" @click="navigateTo(item.link)"></view>
					</view>
					<view class="stats-value" @click="navigateTo(item.link)">{{statsData[item.index]}}</view>
					<view class="stats-help" v-if="item.help && helpIndex === index">{{item.help}}</view>
				</view>
			</view>
			<view class="income">
				<view class="stats-item" v-for="(item,index) in stats.income" :key="index">
					<view class="stats-title">{{item.title}}</view>
					<view class="stats-value">{{statsData[item.index]}}</view>
				</view>
			</view>
		</view>
		<!-- 路由导航 -->
		<view class="routers">
			<view class="router-item" v-for="(item,index) in router" :key="index" @click="navigateTo(item.link)">
				<view class="router-icon" :class="item.iconClass"></view>
				<view class="router-title">{{item.title}}</view>
			</view>
		</view>
		<bussiness-tab current="index"></bussiness-tab>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import bussinessTab from './components/bussiness-tab.vue'
	export default {
		components: {
			bussinessTab
		},
		data() {
			return {
				stats: {
					total: {
						title: '账户总收入(元)',
						index: 'total_money'
					},
					debt: [{
						title: '可用消费券(元) ',
						index: 'account',
						help: '可由分站或平台转账的金额'
					},
					{
						title: '已转账金额(元) ',
						index: 'account_withdraw',
						help: '由分站或平台已转账的金额'
					},
					{
						title: '未结算金额(元) ',
						index: 'unfinished',
						help: '订单未完成还未结算的金额',
						link: './order-commission'
					}],
					income: [{
						title: '店铺入驻收入(元)',
						index: 'account_shop'
					}, {
						title: '线上订单收入(元)',
						index: 'account_order'
					}, {
						title: '收银订单收入(元)',
						index: 'account_collection'
					}]
				},
				statsData: {},
				router: [ {
					title: '我的团队',
					link: './my-team',
					iconClass: 'my-team'
				},{
					title: '商家管理',
					link: './store-manage',
					iconClass: 'store-manage'
				}, {
					title: '邀请商家',
					link: './invite-store',
					iconClass: 'add-store'
				}, 
				/* {
					title: '邀请商家',
					link: './invite-store',
					iconClass: 'invite-store'
				}, 
				{
					title: '店主管理',
					link: './fenxiao-manage',
					iconClass: 'promoters-manage'
				}, {
					title: '添加店主',
					link: './add-fenxiao',
					iconClass: 'add-promoters'
				}, */
				{
					title: '收入明细',
					link: './bill',
					iconClass: 'commission'
				}
				// , {
				// 	title: '团长管理',
				// 	link: './head-manage',
				// 	iconClass: 'teamleader-manage'
				// }, {
				// 	title: '添加团长',
				// 	link: './add-head',
				// 	iconClass: 'add-teamleader'
				// }
				
				],
				helpIndex:-1
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.getHeard();
			} else {
				this.$util.redirectTo(
					'/otherpages/login/login/login',
					{
						back: '/businesscenter/index'
					},
					'redirectTo'
				);
			}
		},
		methods: {
			getHeard() {
				this.$api.sendRequest({
					url: '/city/api/index/getHeard',
					success: res => {
						this.statsData = res.data;
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			switchHelp(index){
				if(this.helpIndex === index){
					this.helpIndex = -1
				}else{
					this.helpIndex = index
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../common/css/mixins.scss';
	$pathBusiness:'business/';

	.flex-left {
		@include flex(flex-start);
	}

	.business-center {}

	.user {
		width: 750rpx;
		height: 209rpx;
		background: #FFFFFF;
		@include flex(flex-start);

		.user-avatar {
			margin-left: 40rpx;
			width: 120rpx;
			height: 120rpx;
			background-color: #f8f8f8;
			margin-right: 20rpx;
			border-radius: 60rpx;
		}

		.user-name {
			font-size: 32rpx;
			color: #303133;
			line-height: 45rpx;
		}

		.user-grade {
			margin-left: 20rpx;
			padding: 0 8rpx;
			height: 40rpx;
			background: #FF4544;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 40rpx;
		}

		.user-commision {
			margin-top: 24rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #606266;
			line-height: 34rpx;
		}
	}

	.stats {
		width: 750rpx;
		background: #FF4544;
		padding: 40rpx 20rpx;


		.stats-title {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.75);
			line-height: 34rpx;
		}

		.total-value {
			font-size: 48rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 67rpx;
		}

		.stats-value {
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 45rpx;
		}

		.total,
		.debt {
			padding: 0 20rpx;
		}

		.debt {
			margin-top: 30rpx;
			@include flex(space-between);
		}

		.income {
			padding: 40rpx 20rpx;
			width: 710rpx;
			background: rgba(255, 137, 136, 0.5);
			border-radius: 8rpx;
			@include flex(space-between);
			margin-top: 48rpx;
		}

		.stats-item {
			position: relative;

			.stats-title {
				@include flex;
			}

			.icon-help,
			.icon-link {
				width: 24rpx;
				height: 24rpx;
			}

			.icon-help {
				@include image($pathBusiness+'icon-help-white.png');
			}

			.icon-link {
				@include image($pathBusiness+'arrow-circle-white.png');
			}

			.stats-help {
				width: 220rpx;
				padding: 12rpx;
				position: absolute;
				right: -100rpx;
				background-color: rgba($color: #000000, $alpha: 0.5);
				color: #fff;
				font-size: 24rpx;
				bottom: 90rpx;

				&::before {
					position: absolute;
					bottom: -20rpx;
					left: 100rpx;
					content: '';
					border-color: rgba($color: #000000, $alpha: 0.5) transparent transparent transparent;
					border-width: 10rpx;
					border-style: solid;
				}
			}
			
		}
	}

	.routers {
		margin-top: 24rpx;
		@include flex(flex-start);
		flex-wrap: wrap;
		padding: 0 38rpx;

		.router-item {
			@include flex(center, center, column);
			margin-bottom: 50rpx;
			width: 25%;

			.router-icon {
				width: 64rpx;
				height: 64rpx;

				&.store-manage {
					@include image($pathBusiness+'databoard-store.png');
				}

				&.add-store {
					@include image($pathBusiness+'icon-add-store.png');
				}

				&.teamleader-manage {
					@include image($pathBusiness+'databoard-teamleader.png');
				}

				&.add-teamleader {
					@include image($pathBusiness+'icon-add-teamleader.png');
				}

				&.promoters-manage {
					@include image($pathBusiness+'databoard-promoters.png');
				}

				&.add-promoters {
					@include image($pathBusiness+'icon-add-promoters.png');
				}

				&.my-team {
					@include image($pathBusiness+'icon-my-team.png');
				}

				&.commission {
					@include image($pathBusiness+'icon-commission.png');
				}

				&.invite-store {
					@include image($pathBusiness+'icon-invite-store.png');
				}
			}

			.router-title {
				margin-top: 18rpx;
				font-size: 27rpx;
				font-weight: 400;
				color: #303133;
				line-height: 38rpx;
			}
		}
	}
</style>
